<template>
  <div class="singer-page" id="singer-page">
    <div class="header">
      <div class="header-contain">
        <span class="item-title">语种:</span>
        <div class="item-content">
          <template v-for="(area, index) of singerAreas" :key="`${area} + ${index}`">
            <div class="contain-item" @click="changeArea(area.value)">
              <span class="box" :class="{ active: activeArea === area.value }">{{area.label}}</span>
            </div>
            <span v-if="!(index === singerAreas.length - 1)" class="geli">|</span>
          </template>
        </div>
      </div>
      <div class="header-contain">
        <span class="item-title">分类:</span>
        <div class="item-content">
          <template v-for="(category, index) of singerCategorys" :key="`${category} + ${index}`">
            <div class="contain-item" @click="changeCategory(category.value)">
              <span class="box" :class="{ 'active': activeCategory === category.value }">{{category.label}}</span>
            </div>
            <span v-if="!(index === singerCategorys.length - 1)" class="geli">|</span>
          </template>
        </div>
      </div>
      <div class="header-contain">
        <span class="item-title">筛选:</span>
        <div class="item-content">
          <template v-for="(alpha, index) of alphaTypes" :key="`${alpha} + ${index}`">
            <div class="contain-item" @click="changeAlpha(alpha.value)">
              <span class="box" :class="{ 'active': activeAlpha === alpha.value }">{{alpha.label}}</span>
            </div>
            <span v-if="!(index === alphaTypes.length - 1)" class="geli">|</span>
          </template>
        </div>
      </div>
    </div>
    <ul class="content" v-loading="isLoading">
      <li class="singer-item" v-for="singer of singerLists" :key="singer">
        <img @click="selectSinger(singer.id)" :src="singer.img1v1Url" alt="">
        <p class="footer">
          <span @click="selectSinger(singer.id)" class="singer-name">{{singer.name}}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { SINGER_AREAS, SINGER_CATEGORYS, ALPHATYPES, SINGER_LIMIT } from '@/utils/constant'
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import { getSingerLists } from '@/api/artists/index'
import { on, off } from '@/utils/dom'
import { debounce } from '@/utils/util'
import { useRouter } from 'vue-router'

interface Type {
  label: string;
  value: number | string
}

interface Singer {
  id: number;
  img1v1Url: string;
  name: string;
}

export default {
  name: 'index',
  setup () {
    const isLoading = ref<boolean>(false)
    const singerAreas = ref<Type[]>(SINGER_AREAS)
    const singerCategorys = ref<Type[]>(SINGER_CATEGORYS)
    const alphaTypes = ref<Type[]>(ALPHATYPES)
    const activeArea = ref<number>(-1)
    const activeCategory = ref<number>(-1)
    const activeAlpha = ref<string | number>(-1)
    const limit = ref<number>(SINGER_LIMIT)
    const singerLists = ref<Singer[]>([])
    const offset = ref<number>(0)
    const isMore = ref<boolean>(true)
    const router = useRouter()
    const init = async () => {
      isLoading.value = true
      offset.value = 0
      try {
        const { data: { artists, more } } = await getSingerLists({ type: activeCategory.value, area: activeArea.value, initial: activeAlpha.value, limit: limit.value, offset: offset.value })
        isMore.value = more
        singerLists.value = artists?.map(item => ({
          id: item.id,
          img1v1Url: item.img1v1Url,
          name: item.name
        }))
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const changeArea = (value) => {
      if (value !== activeArea.value) {
        activeArea.value = value
        offset.value = 0
        init()
      }
    }
    const changeCategory = (value) => {
      if (value !== activeCategory.value) {
        activeCategory.value = value
        offset.value = 0
        init()
      }
    }
    const changeAlpha = (value) => {
      if (value !== activeAlpha.value) {
        activeAlpha.value = value
        offset.value = 0
        init()
      }
    }
    const selectSinger = (id) => {
      router.push({ name: 'singerDetail', params: { id } })
    }
    const updateSingerList = async (event) => {
      const clientHeight = event.target.clientHeight
      const scrollHeight = event.target.scrollHeight
      const scrollTop = event.target.scrollTop
      if (scrollHeight - scrollTop - clientHeight <= 10 && isMore.value) {
        isLoading.value = true
        offset.value++
        try {
          const { data: { artists, more } } = await getSingerLists({ type: activeCategory.value, area: activeArea.value, initial: activeAlpha.value, limit: limit.value, offset: offset.value })
          isMore.value = more
          singerLists.value = singerLists.value.concat(artists?.map(item => ({
            id: item.id,
            img1v1Url: item.img1v1Url,
            name: item.name
          })))
        } catch (e) {
          isLoading.value = false
          console.log(e)
        }
        isLoading.value = false
      }
    }
    onMounted(() => {
      init()
      nextTick(() => {
        on(document.querySelector('#singer-page') as HTMLElement, 'scroll', debounce(updateSingerList, 300))
      })
    })
    onUnmounted(() => {
      off(document.querySelector('#singer-page') as HTMLElement, 'scroll', debounce(updateSingerList, 300))
    })
    return {
      isLoading,
      singerAreas,
      singerCategorys,
      alphaTypes,
      activeArea,
      activeCategory,
      activeAlpha,
      singerLists,
      changeArea,
      changeCategory,
      changeAlpha,
      selectSinger
    }
  }
}
</script>

<style lang="scss" scoped>
.singer-page {
  padding-top: 60px;
  width: 100%;
  height: 100%;
  padding-right: 20px;
  padding-bottom: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;

  .header {
    padding-top: 10px;
    box-sizing: border-box;
    width: 100%;
    padding-right: 80px;

    .header-contain {
      display: flex;
      flex-wrap: nowrap;
      font-size: 12px;
      color: #333333;

      .item-title {
        line-height: 1.5;
        padding: 3px 0;
      }

      .item-content {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .contain-item {
          width: 80px;
          margin-bottom: 10px;
          text-align: center;
          cursor: pointer;

          .box {
            padding: 3px 10px;
            border-radius: 12px;
            line-height: 1.5;
            display: inline-block;
            box-sizing: border-box;
            color: #333333;
          }

          .active {
            background-color: #fdf5f5;
            color: #ec4141;
          }
        }

        .geli {
          color: #cbcbcb;
          line-height: 1.5;
          cursor: default;
        }
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .singer-item {
      flex: 0 0 19%;
      margin-bottom: 15px;

      >img {
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e7e7e7;
        cursor: pointer;
      }

      >p {
        margin-top: 5px;

        .singer-name {
          font-size: 16px;
          color: #333333;
          cursor: pointer;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>
